<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:05:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-09 17:11:11
 * @Description: 视频融合
-->
<template>
  <div>
    <cesium-map @fun="fun" :opt="opt" :type="2"></cesium-map>

    <div
      v-for="(item, index) in datas"
      :key="'video-' + index"
      style="display: none"
    >
      <video
        :ref="item.id"
        :id="item.id"
        :muted="item.muted"
        :autoplay="item.autoplay"
        loop
        crossorigin="*"
        controls=""
      >
        <source :src="item.url" type="video/mp4" />
      </video>
    </div>

    <div class="bt">
      <el-button
        v-for="(item, index) in datas"
        :key="'muted-' + index"
        icon="el-icon-message-solid"
        :round="index == 1"
        :type="index == 1 ? '' : 'warning'"
        @click="sound(item, index)"
        >{{ item.muted ? "静音" : "有声" }} | {{ item.name }}
      </el-button>
      <el-button
        v-for="(item, index) in datas"
        :key="'autoplay-' + index"
        icon="el-icon-video-camera-solid"
        :round="index == 1"
        :type="index == 1 ? '' : 'warning'"
        @click="isPlay(item, index)"
        >{{ item.autoplay ? "播放" : "暂停" }} | {{ item.name }}
      </el-button>
    </div>
  </div>
</template>

<script>
import CesiumMap from "@/components/map/CesiumMap.vue";
export default {
  name: "CesiumVideo",
  components: {
    "cesium-map": CesiumMap,
  },
  data() {
    return {
      opt: {
        view: "116.39142101903516,39.905829367218296,24.424694619304987,359.99870052414934,-5.867252114604867,0.00009514202667093145",
      },

      // 数据
      datas: [
        {
          url: "http://175.155.179.248:90/video/万基泰科工集团.mp4", // 视频路径
          name: "万基泰科工集团",
          id: "myVideo1", // 视频元素的容器id
          pArray: [116.391212, 39.906697, 11.0, 116.391413, 39.906697, 11.0], // 墙面的左右2个点的经纬度和最大高度
          minimumHeights: [0.0, 0.0], // 最低位置（最小高度）。单位米
          muted: true, // 是否静音
          autoplay: true, // 是否播放
        },
        {
          url: "http://175.155.179.248:90/video/智慧泸州-幸福之城.mp4",
          name: "智慧泸州-幸福之城",
          id: "myVideo2",
          pArray: [116.391461, 39.906697, 11.0, 116.391662, 39.906697, 11.0],
          minimumHeights: [0.0, 0.0],
          muted: true, // 是否静音
          autoplay: true, // 是否播放
        },
      ],

      // 点位
      points: [
        {
          isShow: true,
          id: 1,
          name: "万基泰科工集团",
          position: { lng: 116.391315, lat: 39.906695, height: 0.5 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/monitoring-num-l.png"),
              height: 70,
              width: 58,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: null,
          label: {
            pixelOffset: new Cesium.Cartesian2(0, 0),
            outlineWidth: 1,
            font: "16px sans-serif",
            backgroundColor: new Cesium.Color(10 / 255, 17 / 255, 47 / 255, 0),
            distanceDisplayCondition: [50, 200],
            fillColor: Cesium.Color.RED.withAlpha(1),
          },
        },
        {
          isShow: true,
          id: 2,
          name: "智慧泸州-幸福之城",
          position: { lng: 116.391568, lat: 39.906697, height: 0.5 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/monitoring-num-l.png"),
              height: 70,
              width: 58,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: null,
          label: {
            pixelOffset: new Cesium.Cartesian2(0, 0),
            outlineWidth: 1,
            font: "16px sans-serif",
            backgroundColor: new Cesium.Color(10 / 255, 17 / 255, 47 / 255, 0),
            distanceDisplayCondition: [50, 200],
            fillColor: Cesium.Color.RED.withAlpha(1),
          },
        },
      ],
    };
  },
  props: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    fun(viewer, vm) {
      let self = this;

      this.eventInteraction(viewer);
      new CesiumGlobe().titlesetList(
        viewer,
        [
          {
            id: 4,
            name: "d16c1ce0ac2d11e99dbd8fd044883638",
            url: "//lab.earthsdk.com/model/d16c1ce0ac2d11e99dbd8fd044883638/tileset.json",
            offset_x: 0, // 偏移量lon经度
            offset_y: 0, // 偏移量lat纬度
            offset_z: 0, // 偏移量height高度(米)
            onswitch: 1,
            flytoswitch: 0, // 摄像头是否切到到白膜的位置 0 / 1
            color: "rgba(255, 255, 255, 1)", // 白膜颜色 默认rgba(255,255,255,1)
            effectswitch: 0, // 是否启用打光效果 0 / 1
            height: 260, // 光环的移动范围(高度)单位米
            effect_color: "#df16f1", // 打光效果颜色
            createtime: 1626347087,
            updatetime: 1637372783,
          },
        ],
        vm
      );
      new CesiumGlobe().addVideo(viewer, self.datas, vm);

      new CesiumGlobe().addLabel(viewer, self.points, "Video", vm);
    },

    /**
     * 事件交互（鼠标移动和点击）
     * @param {*} viewer
     */
    eventInteraction(viewer) {
      let self = this;
      let handler;
      if (handler != undefined) {
        ShapeEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.MOUSE_MOVE
        );
        ShapeEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        );
      }
      handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

      handler.setInputAction(function (event) {
        // console.log("移动事件：", event);
        // var pick = viewer.scene.pick(event.endPosition);
        // console.log(pick)
        // if (Cesium.defined(pick)) {
        // } else {
        // }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 点击
      handler.setInputAction(function (event) {
        // console.log("点击事件：", event);
        // var pick = viewer.scene.pick(event.position);
        // console.log(pick)
        // if (Cesium.defined(pick)) {
        // } else {
        // }

        // =======================================================================================
        const pickRay = viewer.camera.getPickRay(event.position);
        var cartesian = viewer.scene.globe.pick(pickRay, viewer.scene);
        // 拾取地形高度/海拔、位置信息、经纬度数据
        if (cartesian !== undefined) {
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          let earthPosition = viewer.camera.pickEllipsoid(
            event.position,
            viewer.scene.globe.ellipsoid
          );
          console.log("位置信息1：", earthPosition);
          var maplnglat =
            viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
          console.log("位置信息2：", maplnglat);
          if (Cesium.defined(earthPosition)) {
            let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
            let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
            console.log("位置信息3 - 经纬度：", lon, lat);
            let height = viewer.scene.globe.getHeight(cartographic).toFixed(3);
            console.log("地形高度/海拔：", height);
          }
        }
        // 拾取相机数据
        if (true) {
          console.log("相机方向：", viewer.camera.direction);
          let cheight = viewer.camera.positionCartographic.height.toFixed(2);
          console.log("相机高度数据：", cheight);
          let bestView = {
            position: {
              x: viewer.camera.positionWC.x,
              y: viewer.camera.positionWC.y,
              z: viewer.camera.positionWC.z,
            },
            // 方向 围绕Z轴旋转
            heading: Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2),
            // 倾斜角度 围绕Y轴旋转
            pitch: Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2),
            // 围绕X轴旋转
            roll: Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2),
          };
          console.log("相机最佳位置数据：", JSON.stringify(bestView));
        }
        // =======================================================================================
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },

    /**
     * 是否开启声音
     */
    sound(item, index) {
      let videoElement = this.$refs[item.id][0];
      item.muted = !item.muted;
      videoElement.muted = item.muted;
    },
    /**
     * 是否播放
     */
    isPlay(item, index) {
      let videoElement = this.$refs[item.id][0];
      item.autoplay = !item.autoplay;
      item.autoplay ? videoElement.play() : videoElement.pause();
    },
  },
};
</script>

<style lang="less" scoped>
.bt {
  position: fixed;
  bottom: 20px;
  left: 0;
  z-index: 9999;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
